<template>
    <div>
        <!-- 搜索头 -->
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
            <el-form-item>
                <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                    border>
                    查看已删门店
                </el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                    unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                    :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="storeDialogShow" style="width: 180px;">选择门店</el-button>
            </el-form-item>
            <el-form-item>
                <el-select placeholder="机台类型" v-model="formInline.project_type" filterable @change="machineTypeChange"
                    style="width: 180px;">
                    <el-option v-for="item in machine_type_list" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select placeholder="机台名称" v-model="formInline.machine_name" filterable style="width: 180px;">
                    <el-option v-for="item in machine_name_list" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <dj-button size="small" @search="searchClick" />
            </el-form-item>
        </el-form>
        <el-dialog :close-on-click-modal="false" width="650px" title="选择门店" :visible.sync="storeDialog">
            <div v-if="categoryId!=293">
                <el-select size="small" placeholder="选择品牌" v-model="formInline.brand_id" @change="brandChange">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <br>
                <br>
            </div>
            <div>
                <div class="el-transfer-panel pull-left transferHeader">选择门店</div>
                <div class="el-transfer-panel pull-right transferHeader">已选门店</div>
            </div>
            <el-transfer :props="{key: 'id', label: 'name'}" :titles="['全选', '全选']" :button-texts="['删除', '添加']"
                filterable v-model="formInline.store_id" :data="storeList" @change="storeChange">
            </el-transfer>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="saveStoreClick">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getBrandList,
        getStoreList,
        getType
    } from "@/api/searchHeader/dj-search-sttn";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        props: ["categoryId"],
        data() {
            return {
                ok_brand: '',
                ok_store_list: [],
                storeDialog: false,
                allStoreList: null,
                storeList: [],
                brandList: null,
                leftCheckedBox: false,
                rightChecked: [],
                machine_type_list: null,
                machine_name_list: [],
                formInline: {
                    brand_id: '',
                    store_id: [],
                    project_type: '',
                    begin_time: '',
                    end_time: '',
                    machine_name: '',
                    look_del: '0'
                },
                default_list: [],
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            };
        },
        activated() {
            if (!this.machine_type_list || !this.allStoreList) {
                this.getAllStore();
                this.getMachineType();
            }
        },
        methods: {
            lookDelChange() {
                this.getAllStore();
            },
            storeChange(value, direction, movedKeys) {
                // this.leftChecked = ['1', '2', ' 2', '2']
                // console.log(this.formInline.store_id)
                // console.log(value, direction, movedKeys);
            },
            saveStoreClick() {
                if (this.formInline.store_id.length == 0) {
                    this.$message({ type: 'error', message: '请添加选择门店' })
                    return;
                }
                this.ok_brand = this.formInline.brand_id;
                this.default_list = [];
                this.formInline.store_id.forEach((val1, i) => {
                    this.allStoreList.forEach((val2, j) => {
                        if (val1 == val2.id) {
                            this.default_list.push({ store_name: val2.name, store_id: val2.id })
                        }
                    })
                })
                this.storeDialog = false;
                //第一个参数名为调用的方法名，第二个参数为需要传递的参数
                this.$emit('saveStoreList', this.default_list);
            },
            storeDialogShow() {
                this.formInline.brand_id = this.ok_brand;
                this.formInline.store_id = [];
                if (this.ok_brand) {
                    this.default_list.forEach((val, i) => {
                        this.formInline.store_id.push(val.store_id)
                    })
                }
                this.formInline.brand_id = this.ok_brand == '' ? '1' : this.ok_brand
                this.getBrand();
                this.storeDialog = true;
            },
            getBrand() {
                getBrandList({ org: 1, category_id: this.categoryId }).then(response => {
                    this.brandList = response;
                    // this.formInline.brand_id = response[0].id
                    this.getStore()
                });
            },
            brandChange() {
                this.formInline.store_id = '';
                this.formInline.area_id = '';
                this.formInline.store_id = [];
                this.getStore();
            },
            getStore() {
                if(this.categoryId==293){
                    this.formInline.brand_id = 0
                }
                getStoreList({ look_del: this.formInline.look_del, brand: this.formInline.brand_id, category_id: this.categoryId }).then(response => {
                    this.storeList = [];
                    this.storeList = response;
                });
            },
            getMachineType() {
                getType({}).then(response => {
                    this.machine_type_list = response;
                    this.formInline.project_type = response[0].id
                    this.machineTypeChange();
                });
            },
            machineTypeChange() {
                this.getMachineName();
            },
            getMachineName() {
                this.formInline.machine_name = '';
                let data = {
                    id: this.formInline.project_type,
                };
                getType(data).then(response => {
                    this.machine_name_list = response;
                    this.formInline.machine_name = response[0].id
                });
            },
            getAllStore() {
                getStoreList({ look_del: this.formInline.look_del }).then(response => {
                    this.allStoreList = response;
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    if (this.formInline.store_id.length == 0) {
                        this.$message({ type: 'error', message: '请先选择门店' })
                        return;
                    }
                    if (!this.formInline.machine_name) {
                        this.$message({ type: 'error', message: '请选择机台' })
                        return;
                    }
                    //第一个参数名为调用的方法名，第二个参数为需要传递的参数
                    this.$emit('fetchData', this.formInline);
                });
            },
        }
    };
</script>
<style>
    .el-transfer-panel .el-transfer-panel__header {
        position: absolute;
        bottom: -2px;
        width: 100%;
    }

    .transferHeader {
        height: 40px;
        line-height: 40px;
        background: #f5f7fa;
        margin: 0;
        padding-left: 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #000;
    }

    .el-transfer-panel__body {
        height: 280px;
    }

    .el-transfer-panel {
        width: 230px;
    }
</style>